<template>
    <el-dialog :title="title" v-model="visible" width="1000px" destroy-on-close append-to-body @closed="$emit('closed')">
        <el-scrollbar ref="scrollbarRef" max-height="500px" always>
            <el-form class="dialog-body" :model="formData" label-position="top" style="padding: 0 20px">
                <el-row class="form-layout" :gutter="20">
                    <el-col :span="12" v-for="item in column" :key="item.prop">
                        <el-form-item :label="item.label">
                            <el-input v-model="formData[item.prop]"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-scrollbar>

        <template #footer>
            <div class="dialog-footer">
                <el-button :loading="btnLoading" type="primary" @click.stop="submitFileForm">确 定</el-button>
                <el-button @click.stop="visible = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
export default {
    name: 'DataAdd',
    data() {
        return {
            title: '新增数据',
            visible: false,
            formData: {},
            column: [],
            modelId: '',
            btnLoading: false
        };
    },
    methods: {
        open(column, modelId) {
            this.visible = true;
            this.modelId = modelId;
            if (Array.isArray(column)) {
                const tmpObject = {};
                this.column = column.filter((item) => {
                    item.prop !== 'id' && (tmpObject[item.prop] = '');
                    return item.prop !== 'id';
                });
                this.formData = tmpObject;
            }
        },
        async submitFileForm() {
            this.btnLoading = true;

            const data = {
                modelId: this.modelId,
                value: JSON.stringify(this._formData)
            };
            const res = await this.$API.app.model.modelSave.post(data);
            if (res.code === 200 || res.code === 0) {
                this.$message.success({
                    message: res.msg
                });
                this.$emit('refresh');
                this.visible = false;
            } else {
                this.$message.error({
                    message: res.msg
                });
            }
            this.btnLoading = false;
        }
    }
};
</script>

<style lang="scss" scoped></style>
